<template>
	<view class="contentBox">
		<view class="title">名称：</view>
			<input type="text"
						 class="name_box"
						 :placeholder="placeholders"
						 @focus="focusStyle"
						 @blur="blurStyle"
						 
						 :class="isFocus ? 'focusstyle' : ''"/>		
	</view>
</template>

<script>
	
	export default {
		name:"AddName",
		data() {
			return {
				isFocus:false,
				addTitle:'综合副柜'
			}
		},
		computed:{
			placeholders(){			
				return '请输入'+ this.addTitle +'名称(必填项)'
			}
		},
		
		mounted(){
			uni.$on('addTitle', e => {
				this.addTitle = e;
			})			
			// uni.$on('checkFocus',() => {this.isFocus = true})
		},

		methods: {
			//添聚焦样式
			focusStyle(){
				this.isFocus = true;
			},
			//除聚焦样式
			//修改vuex数据modifyName
			blurStyle(e){
				this.isFocus = false;
				const addName = e.detail.value.trim();
				console.log(addName);
				uni.$emit('addName',addName)
				if(e.detail.value.trim()===''){
					uni.showToast({
						title:"副柜名字不能为空"
					})
				}
			}
	
		}
	}
</script>

<style scoped lang="less">
	.contentBox {
		background:#F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		// width: 27.44vw;
		width: 45.44vw;
		margin: 0 auto;
		// margin-bottom: 30rpx;
		margin-bottom: 1.97vh;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.title {
		color: #777777;
		font-size: 34rpx;
		width: 5vw;
		padding:24rpx 2rpx 24rpx 36rpx;
		box-sizing: border-box;
	}
	.name_box {
		// width:584rpx;
		// height: 88rpx;
		width: 20.25vw;
		height: 5.7vh;
		// line-height: 80rpx;
		line-height: 5.5vh;
		background: #FFFFFF;
		border: 4rpx solid #CCCCCC;
		border-radius:20rpx;
		font-size:36rpx;
		padding-left:45rpx;
		margin-left: 24rpx;
		color: #222;
		box-sizing: border-box;
	}
	.focusstyle {
		border: 4rpx solid #4F9AFF !important;
	}
</style>


